<template>
	<view class="select-city-wrap">
		<view class="select-city">
			<view class="index">
				<view class="index-item" @click="scrollTo('#')">#</view>
				<view class="index-item" v-for="item in citys" :key="item.letter" @click="scrollTo(item.letter)">{{item.letter}}</view>
			</view>
			<scroll-view :scroll-into-view="scrollIntoId" :scroll-y="true" :scroll-with-animation="true" :style="{height:windowHeight}">
				<view class="content">
					<view class="section" id="current">
						<view class="city-title">{{__('当前城市')}}</view>
						<view class="city-list">
							<view class="city-item">{{current}}</view>
						</view>
					</view>
					<view class="section" id="hot" v-if="hotCitys.length">
						<view class="city-title">{{__('热门城市')}}</view>
						<view class="city-list">
							<view class="city-item" :class="{active: current === city.subsite_name}" v-for="(city, i) in hotCitys" :key="i" @click="onSelect(city)">{{city.subsite_name}}</view>
						</view>
					</view>
					<view class="section" :id="item.letter" v-for="item in citys" :key="item.letter">
						<view class="letter">{{item.letter}}</view>
						<view class="city-list">
							<view class="city-item" :class="{active: current === city.subsite_name}" v-for="(city,itemIndex) in item.list" :key="itemIndex" @click="onSelect(city)">{{city.subsite_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	//import Citys from './citys'
	export default {
		props: {
			citys: {
				type: Array,
				default () {
					return []
				}
			},
			hotCitys: {
				type: Array,
				default () {
					return []
				}
			},
			subsite_current: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				windowHeight: '',
				scrollIntoId: 'F',
				current: this.subsite_current.subsite_name
			}
		},
		mounted() {
			let that = this;
			this.getSystemInfo()

			setTimeout(function() {
				that.current = that.subsite_current.subsite_name
			}, 400)
		},
		methods: {
			getSystemInfo() {
				uni.getSystemInfo().then(res => {
					let [error, data] = res
					this.windowHeight = `${data.windowHeight}px`
				})
			},
			scrollTo(letter) {
				this.scrollIntoId = letter === '#' ? 'current' : letter
			},
			onSelect(city) {
				this.current = city.subsite_name
				this.$emit('input', city)
				this.$emit('on-select', city)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-city-wrap {
		position: relative;
		padding: 0 30rpx;
		background-color: #fff;
	}

	.select-city {
		.index {
			position: absolute;
			right: 0;
			bottom: 20rpx;
			z-index: 999;
			color: #2f9bfe;
			font-size: 32rpx;

			.index-item {
				width: 40rpx;
				height: 42rpx;
				line-height: 42rpx;
				text-align: center;
			}
		}

		.section {
			margin-bottom: 19rpx;

			.city-title {
				color: #333;
				font-size: 28rpx;
				margin-bottom: 28rpx;
			}

			.letter {
				width: 44rpx;
				height: 44rpx;
				color: #fff;
				border-radius: 100%;
				background-color: #2f9bfe;
				font-size: 28rpx;
				line-height: 44rpx;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.city-list {
				display: flex;
				flex-wrap: wrap;

				.city-item {
					width: 190rpx;
					height: 55rpx;
					margin-right: 36rpx;
					margin-bottom: 28rpx;
					line-height: 55rpx;
					text-align: center;
					border: 1px solid #dcdcdc;
					border-radius: 6rpx;
					color: #999;
					font-size: 28rpx;

					&.active {
						background-color: #d5ebff;
						border-color: #2f9bfe;
						color: #2f9bfe;
					}
				}
			}
		}
	}
</style>